<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拳王争霸赛</title>
    <style>
        html,body,span,p,a{
            margin:0;padding:0;
        }
        body>:first-child{
            width:100%;
            height: 150px;
            margin: 1% auto;
           border-bottom: 1px solid green;
        }
        body>div>div{           
            height: 25%;
            float: left;
        }
        #user{
            width: 60%;
        }
        #data{
            width: 30%;
        }
        div>div>div{
            width:80%;
            margin: 50px auto 0 72px;
            clear: both;
        }        
        .no-user :first-child{
            width:60%;
        }
        .no-user :last-child{
            width:30%;            
        }
        .no-user input{
            text-align:center;
            height: 46px;
            padding:2px;
            border:2px
        }
        #data div{
            width: 100%;
            margin: 50px auto;
            font-size: 2em;
            color: red;
        }
        #data>div>:last-child{
            background: blue;
        }
       p{
            text-align: center;
        }
        .no-user{
            display: none;
        }
        .user{
            text-align: center;
            margin: 50px auto;
            background-color: red;
            font-size: 2em;
            color: blue;
        }
        .banner-title{
            font-size: 1.5em;
            margin-bottom: 20px;
        }
        .banner-header>span{
            display: inline-block;
            width: 33%;
            font-size: 1.3em;  
        }
        #data-list{
            width: 100%;
        }
        #data-list ul{
            width: 100%;
        }
        #data-list ul li{
            display: inline-block;
            width:33%;
            height: 2em;
            text-align: center;
        }
        ul,li{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    
    <div>
        <div id="user">
            <div class="no-user">                
                <input type="text" value="请输入姓名"><input type="submit" value="提交">
            </div>
            <div class="user" onclick="playTa()">
                随机挑战
                <p id="sayhi"></p>
                
            </div>
        </div>
        <div id="data">
            <div>
                <p id="mylove">当前分数:0</p>
                <p onclick="data_up()">刷新分数</p>
            </div>
        </div>
    </div>

    <div>
        <p class="banner-title">排名</p>
        <p class="banner-header">
            <span>姓名</span>
            <span>分数</span>
            <span>排名</span>
        </p>
        <ul id="data-list">            
        </ul>
    </div>
    
    <script>
        var data={
            name:"拳王", 
            rob:["石头","剪刀","布"],           
            data:[{name:"庄子",kpi:20,new:1
                    },{name:"老子",kpi:17,new:2
                    },{name:"秦始皇",kpi:10,new:3
                    },{name:"武则天",kpi:66,new:4
                    },{name:"刘邦",kpi:3,new:4
                    },{name:"项羽",kpi:33,new:4
                    },{name:"孔子",kpi:50,new:4
                    },{name:"毛泽东",kpi:88,new:4
                    },{name:"凯文·米特尼克",kpi:30,new:4
                    },{name:"奥巴马",kpi:30,new:4
                    },{name:"成龙",kpi:55,new:4
                    },{name:"蔡英文",kpi:-5,new:4
                    },{name:"巴菲特",kpi:12,new:12
                    },{name:"窦娥",kpi:12,new:12
                    },{name:"特朗普:点我猜拳！",kpi:5,new:4
                    },{name:"王阳明",kpi:56,new:34}],
            
        }
        var data_list=document.getElementById("data-list");
        function dataUp(){
            let str;
            for(let i=0;i<data.data.length;i++){
                data.data[i].new=i+1;
                str+="<ul onclick=play("+i+")><li>"+data.data[i].name+"</li><li>"+data.data[i].kpi+"</li>"+data.data[i].new+"<li></ul>";
            }
            //console.log(str);
            data_list.innerHTML=str;
        }
        
        function data_new(some){            
            let arr=some;
            if(arr.length<1){
                return arr;
            }
            let pivotIndex=Math.floor(arr.length/2);
            //找出基准值的位置
            //console.log(arr);
            let pivot=arr.splice(pivotIndex,1)[0];
            //取出基准值
            // console.log(arr,arr.length);
            // console.log(pivotIndex,pivot);

            var left=[];
            var right=[];

            //console.log(arr[0].kpi,pivot.kpi)

            for(let i=0;i<arr.length;i++){
                //console.log(arr[i].name)
                if(arr[i].kpi>pivot.kpi){
                    left.push(arr[i]);
                    
                }else{
                    right.push(arr[i]);
                }
            }
            console.log(arr,left)
           // return right
            return data.data=data_new(left).concat(pivot,data_new(right));
        }
        

        var person=prompt("请输入你的名字","Harry Potter");
        data.name=person;
        data.data.push({name:person,kpi:0});
        document.getElementById("sayhi").innerHTML="你好，"+person+"";

        console.log(data_new(data.data));
        dataUp();

        
        function randomRange(min, max) { // min最小值，max最大值
            return Math.floor(Math.random() * (max - min)) + min;
        }
        function pk(num){
            let left=num,right=randomRange(0,3);
            if (left==right){
                alert("对方出了一个："+data.rob[right]+"平局");
                return 0;
            }
            console.log("我出来一个："+data.rob[left]);
            console.log("left\right"+left,right);
            switch(left){
                case 0:{//我出石头                    
                    if(right==1){
                        alert("对方出了一个："+data.rob[right]+"胜利");//他出剪刀
                        return 1;
                    }else if(right==2){
                        alert("对方出了一个："+data.rob[right]+"失败");//他出布
                        return 2;
                    }
                }
                break;
                case 1:{//我出剪刀
                    if(right==0){
                        alert("对方出了一个："+data.rob[right]+"失败");//他出石头
                        return 2;
                    }else if(right==2){
                        alert("对方出了一个："+data.rob[right]+"胜利");//他出布
                        return 1;
                    }
                }
                break;
                case 2:{//我出布
                    if(right==0){
                        console.log("对方出了一个："+data.rob[right]+"胜利");//他出石头
                        return 1;
                    }else if(right==1){
                        console.log("对方出了一个："+data.rob[right]+"失败");//他出剪刀
                        return 2;
                    }
                }
                break;
            }
        }
        function play(humen){
            
            let num=humen;
            if(data.data[num].name==data.name){
                console.log("不能和自己作战");
                alert("不能和自己作战");
            }else{
                let pks=prompt("开始和"+data.data[num].name+"作战，请输入：剪刀、石头、布其中任意一种");
                // if(pks!="石头"|pks!="剪刀"|pks!="布"){
                //     console.log("不规则一次");
                //     alert("请遵守规则，按照规定输入");
                //     return 0;
                // }
                
                let left;
                switch(pks){
                    case "剪刀":
                        left=1
                    break;
                    case "石头":
                        left=0;
                    break;                       
                    case "布":
                        left=2;
                    break;
                }
                let vin=pk(left);
                if(vin!=0){
                   for(let i=0;i<data.data.length;i++){
                    if(data.data[i].name==data.name){
                        if(vin==1){
                            data.data[i].kpi+=1;
                            data.data[num].kpi-=1;
                        }else if(vin=2){
                            data.data[i].kpi-=1;
                            data.data[num].kpi+=1;
                        }
                        document.getElementById("mylove").innerHTML="当前分数"+data.data[i].kpi;
                        console.log(data);
                        data_new(data.data);
                        dataUp();
                        break;
                        console.log(未能跳出循环);

                    }
                   };
                }
            }
            console.log(randomRange(1,3));
        }   
        
        function playTa(){
            let num=randomRange(0,data.data.length-1);
            if(data.data[num]!==data.data.name){
                alert(data.data[num].name+"迫不及待对你发起挑战");
                play(num);
            }else{
                playTa();
            }
        }
    </script>
</body>
</html>
